<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<style type="text/css">
.col {
	width: 50%;
	padding: 10px;
	padding: 0px 30px 0px 0px;
	vertical-align: top;
}
</style>
	<h:panelGrid columns="2" width="100%" columnClasses="col">

		<f:verbatim>
                This code does not work as expected. The expected echo text does not appear
                below even the condition for <code>'rendered'</code> returns <code>true</code>.
                Also, the error message does not appear when the length of the text reaches the limit.
			</f:verbatim>
		<f:verbatim>
                This code works properly. The <code>h:message</code> is marked for update during
                each Ajaxrequest/response. The place for bottom label is reserved with
                <code>outputPanel</code> while  the component is not rendered.
            </f:verbatim>

		<a4j:outputPanel layout="block">


			<a4j:outputPanel layout="block">
				<h:form>
					<h:message for="text1" style="color:red" />

					<h:outputText style="font-weight: bold;" value="Enter Text: " />
					<h:inputText id="text1" label="text1" value="#{opBean1.text}">
						<f:validateLength maximum="10" />
						<a4j:ajax event="keyup" execute="@this" render="out1"
							onerror="return false;" />
					</h:inputText>

					<h:outputText id="out1" rendered="#{not empty opBean1.text}"
						value="Approved Text: #{opBean1.text}" />
				</h:form>
			</a4j:outputPanel>

		</a4j:outputPanel>

		<a4j:outputPanel layout="block">
			<h:form>
				<a4j:outputPanel layout="block" ajaxRendered="true">
					<h:message for="text2" style="color:red" />
				</a4j:outputPanel>

				<h:outputText style="font-weight: bold;" value="Enter Text: " />
				<h:inputText id="text2" label="text2" value="#{opBean2.text}">
					<f:validateLength maximum="10" />
					<a4j:ajax event="keyup" execute="@this" render="out2" />
				</h:inputText>

				<a4j:outputPanel id="out2" layout="block">
					<h:outputText rendered="#{not empty opBean2.text}"
						value="Approved Text: #{opBean2.text}" />
				</a4j:outputPanel>
			</h:form>
		</a4j:outputPanel>
	</h:panelGrid>
</ui:composition>